<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> 
    <title>供应商列表</title> 
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/uimaker/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/style.css">
	<style type="text/css">
		.layui-layer-success .layui-layer-title {
		    background: rgb(30,147,30);
		    color: #fff;
		    border: none
		}
		
		.layui-layer-success .layui-layer-btn a {
		    background: rgb(30,147,30);
		    border-color: rgb(30,147,30);
		}
		
		.layui-layer-success .layui-layer-btn .layui-layer-btn1 {
		    background: #92B8B1
		}
		
		.layui-layer-error .layui-layer-title {
		    background: #f0ad4e;
		    color: #fff;
		    border: none
		}
		
		.layui-layer-error .layui-layer-btn a {
		    background: #f0ad4e;
		    border-color: #f0ad4e;
		}
		
		.layui-layer-error .layui-layer-btn .layui-layer-btn1 {
		    background: #92B8B1
		}
	</style>
</head> 
<body>
    <div class="container">
       <table id="dg" style="width:100%;min-height: 569px;" data-options="
       			url:'${ctx}/order/pagedlist',
       			method:'post',
                rownumbers:true,
                singleSelect:false,
                autoRowHeight:false,
                pagination:true,
                fitColumns:true,
                striped:true,
                checkOnSelect:false,
                selectOnCheck:false,
                collapsible:true,
                toolbar:'#tb',
                pageSize:10, pageList:[10, 20, 30, 50, 100]">
            <thead>
                <tr>
					<th data-options="field:'id',width:80,align:'center',formatter:optFormatter">操作</th>
					<th data-options="field:'orderId',width:100">订单号</th>
					<th data-options="field:'sellerName',width:100">商家名称</th>
					<th data-options="field:'name',width:100,align:'left'">车主</th>
					<th data-options="field:'phone',width:100,align:'center'">手机</th>
					<th data-options="field:'price',width:60,align:'right',formatter:colFormatter">价格</th>
					<th data-options="field:'state',width:100,formatter:stateFormatter">订单状态</th>
					<th data-options="field:'createUname',width:100">下单人</th>
				</tr>
            </thead>
        </table>
      <div id="tb" style="padding:0 30px;">
        <div class="conditions">
            <span class="con-span">订单号:</span><input class="easyui-textbox" id="q_orderId" type="text" name="q_orderId" style="width:166px;height:35px;line-height:35px;"></input>
            <span class="con-span">车主手机号: </span><input class="easyui-textbox" type="text" id="q_mobile" name="q_mobile" style="width:166px;height:35px;line-height:35px;"></input>
            <a class="easyui-linkbutton search-btn" iconCls="icon-search" data-options="selected:true">查询</a>
            <a class="easyui-linkbutton search-reset" iconCls="icon-reload">重置</a>
            <a class="easyui-linkbutton more" iconCls="icon-more">更多</a>
        </div>
        <div class="conditions hide">
            <span class="con-span">商家:</span>
            <select class="easyui-combobox" id="q_sellerId" name="q_sellerId" style="height:35px;width:166px;">
            	<option value="">全部</option>
            	<c:forEach var="item" items="${sellers}">
            		<option value="${item.id}">${item.name}</option>
            	</c:forEach>
            </select>
            <span class="con-span">创建时间: </span>
            <input class="easyui-datebox" id="beginTime" data-options="editable:false" type="text" name="q_begin" style="width:166px;height:35px;line-height:35px;"></input>
            -&nbsp;&nbsp;&nbsp;
            <input class="easyui-datebox" id="endTime" data-options="editable:false" type="text" name="q_end" style="width:166px;height:35px;line-height:35px;"></input>
        </div>
        <div class="opt-buttons">
            <a href="${ctx}/order/input" class="easyui-linkbutton" data-options="selected:true">新增</a>
            <a href="${ctx}/order/toexcelinpage" class="easyui-linkbutton">Excel导入</a>
            <a href="javascript:excelout();" class="easyui-linkbutton">Excel导出</a>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="${ctx}/static/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/layer/layer.js"></script>
    <script type="text/javascript">
    
    	var excelout = function() {
    		layer.confirm('暂时只提供最多导出最近10000条记录，确定导出？', {
  			  btn: ['确定','取消'] //按钮
  			}, function(){
  				$('.layui-layer-dialog').hide();
  				var url = '${ctx}/order/excelout';
  				location.href = url;
  				/* 
  				这种方式有问题
  				$.get("${ctx}/order/excelout", {
        			qOrderId : $('[name="q_orderId"]').val(),
        			qMobile : $('[name="q_mobile"]').val(),
        			qSellerId : $('[name="q_sellerId"]').val(),
        			qBegin : $('[name="q_begin"]').val(),
        			qEnd : $('[name="q_end"]').val()
        		}, function(data){
  					  }); */
  			}, function(){
  			});
    	}
    
    	var optFormatter = function(value) {
    		// value 1
    		// <a href='${ctx}/order/edit/1'>修改</a>
    		return "<a href='${ctx}/order/edit/" + value + "'>修改</a>" 
    		+ "&nbsp;" + 
    		"<a href='javascript:confirmDelete(" + value + ")'>删除</a>"
    		+ "&nbsp;" + 
    		"<a href='${ctx}/order/view/" + value + "'>查看</a>";
    	}
    	
    	var stateFormatter = function(value) {
    		switch(value) {
    			case 1: return '新订单';
    			case 2: return '待安装';
    			case 3: return '订单结束';
    		}
    		return '未知';
    	}
    	
    	var confirmDelete = function(id) {
    		layer.confirm('确定要删除吗？', {
    			  btn: ['确定','取消'] //按钮
    			}, function(){
    				var url = '${ctx}/order/delete/' + id;
    				location.href = url;
    			}, function(){
    			});
    	}
    
    	var colFormatter = function(value, row) {
    		/*
    		客户端保留两位小数
    		var value = new Number(value);
    		value = value.toFixed(2); 
    		*/
    		return ("<span style='color:red;'>￥</span>" + value);
    	}
    
        $(function(){
            $('#dg').datagrid();
        });    

        $(".more").click(function(){
            $(this).closest(".conditions").siblings().toggleClass("hide");
        });
        
        $(function() {
        	$('.search-reset').on('click', function() {
        		$('#q_orderId').textbox('setValue','');
        		$('#q_mobile').textbox('setValue','');
        		$('#q_sellerId').combobox('setValue','');
        		$('#beginTime').textbox('setValue','');
        		$('#endTime').textbox('setValue','');
        	});
        	
        	$('.search-btn').on('click', function() {
        		$('#dg').datagrid('load', {
        			qOrderId : $('[name="q_orderId"]').val(),
        			qMobile : $('[name="q_mobile"]').val(),
        			qSellerId : $('[name="q_sellerId"]').val(),
        			qBegin : $('[name="q_begin"]').val(),
        			qEnd : $('[name="q_end"]').val()
        		});
        	});
        	
        	$("#beginTime").datebox({
    			onSelect:
    				function(firstDate){
    					$('#endTime').datebox().datebox('calendar').calendar({
    						validator : function(date) {
	    						var d1 = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
	    						var d2 = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
	    						d2.setMonth(d1.getMonth() + 1);
	    						return d1<=date && date<=d2;
    						}
    					})
    				}
   			});
        });
        
        $(function() {
        	<c:if test="${not empty successMessage}">
        		layer.alert('${successMessage}', {
        			  skin: 'layui-layer-success', 
        			  closeBtn: 0
        			});
        	</c:if>
        	<c:if test="${not empty errorMessage}">
	    		layer.alert('${errorMessage}', {
      			  skin: 'layui-layer-error', 
      			  closeBtn: 0
      			});
	    	</c:if>
        });
    </script>
</body> 
</html>